<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>

        <button @click="update">更新八蛋</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">{{p.name}} -{{p.age}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    persons: [{
                            id: '001',
                            name: '张三',
                            age: 30
                        },
                        {
                            id: '002',
                            name: '牛蛋',
                            age: 12
                        },
                        {
                            id: '003',
                            name: '李狗蛋',
                            age: 20
                        }, {
                            id: '004',
                            name: '王八蛋',
                            age: 9
                        }
                    ],
                }
            },
            methods: {
                update() {
                    // 更新失败了,你敢信,哈哈哈哈,内存改变,vue没有监听到数据变化,
                    // this.persons[3] = {
                    //     id: '004',
                    //     name: 'aaaa',
                    //     age: 11
                    // }

                    // 生效
                    this.persons.splice(3, 1, {
                        id: '005',
                        name: 'aaaa',
                        age: 9
                    })
                }
            },
        })
    </script>
</body>

</html>